<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="类目选择">
        <el-button type="primary" @click="openInner">选择类目</el-button>
        <!-- <span>{{leimu}}</span> -->
        <span>----{{form.cid}}</span>
      </el-form-item>
      <el-form-item label="商品标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="商品卖点">
        <el-input v-model="form.sellPoint"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="库存数量">
        <el-input v-model="form.num"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-button type="primary" @click="uploadVisible=true">上传图片</el-button>
        <span>{{form.image}}</span>
      </el-form-item>
      <el-form-item label="商品描述">
        <!-- <el-input v-model="form.desc"></el-input> -->
        <vue-ueditor-wrap :config="myConfig" v-model="form.desc"></vue-ueditor-wrap>
      </el-form-item>
      
      <!-- 规格参数添加的视图 -->
      <div v-if='guige.paramData'>
      <div v-for='(param,index) in JSON.parse(guige.paramData)'
        :key='index'
      >
        <p>{{param.value}}</p>
        <el-form-item v-for='(items,idx) in param.children'
          :key='idx'
          :label='items.value'
        >
          <el-input
          v-model='guigecs[items.value]'
          ></el-input>
        </el-form-item>
      </div>
      </div>
      <!-- 规格参数添加的视图 -->
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="上传图片" :visible.sync="uploadVisible" append-to-body width="50%">
      <UploadImg @getpicurl="getpicurl" />
      <el-button type="primary" @click="uploadVisible = false">取消</el-button>
      <el-button type="primary" @click="uploadVisible = false">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import UploadImg from "./UploadImg";
export default {
  name: "AddProduct",
  components: {
    UploadImg
  },
  // props: ['preData',"innerVisible", "outerVisible", "cid", "leimu"],
  props:{
    'preData':{
      type:[String,Object],
      default:function(){
        return {}
      }
    },
    'innerVisible':Boolean,
    'outerVisible':Boolean,
    'cid':[String,Number],
    leimu:String,
    guige:{
      type:Object,
      default:function(){
        return {}
      }
    },
    preGuige:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    return {
      uploadVisible: false,
      id:'',
      form: {
        title: "",
        sellPoint: "",
        cid: "",
        price: "",
        num: "",
        desc: "",
        image: ""
      },
      guigecs:{},
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/UEditor/"
      }
    };
  },
  mounted(){
    if(this.preData.title){
      this.form.title = this.preData.title;
      this.form.sellPoint=this.preData.sellPoint
      this.form.cid=this.preData.cid
      this.form.price=this.preData.price
      this.form.num=this.preData.num
      this.form.desc=this.preData.descs
      this.form.image=this.preData.image
      this.id = this.preData.id;
    }
  },
  watch:{
      cid(n){
          if(n){
              this.form.cid = n;
          }
      },
      preData(n){
        if(n){
          this.form.title = n.title;
          this.form.sellPoint=n.sellPoint
          this.form.cid=n.cid
          this.form.price=n.price
          this.form.num=n.num
          this.form.desc=n.desc
          this.form.image=n.image
          this.id = n.id;
        }
      },
      preGuige(n){
        console.log(n)
        this.guigecs = JSON.parse(n.conent)
      }
  },
  methods: {

    //   获取图片路径
    getpicurl(url) {
      this.form.image = "mock/" + url.url;
    },
    openInner() {
      this.$emit("changeInner", true);
    },
    onSubmit() {
      console.log(this.form,this.guigecs)
      if(this.id){
        // 这是更新功能
        this.$api.getUpdateTbItem({...this.form,id:this.id})
        .then(data=>{
          if(data.status == 200){
            this.$emit('changeOuter',false)
            // 重新请求数据
            this.$emit('getdata',1);
            this.$emit('clearCid');
            this.$message({
              message:'修改成功',
              type:'success'
            })
          }else{
            this.$message({
              message:'修改失败',
              type:'error'
            })
          }
        })

        this.$api.getUpdateItemParamContent({
          id:this.id,
          content:JSON.stringify(this.guigecs)
        })
        .then(data=>{
          console.log(data)
        })
      }else{
        // 添加功能
        this.$api.getInsertTbItem(this.form)
        .then(data=>{
            if(data.status == 200){
              this.$emit("changeOuter", false);
              
              // 把规格参数添加到数据库
              this.$api.getInsertItemParamContent({id:data.productId,content:JSON.stringify(this.guigecs)})
              .then(result=>{
                if(result.status == 200){
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                }
              })
              // 重新请求数据
              this.$emit('getdata',1);
              this.$emit('clearCid');
              // 把form中的数据清空
              this.form={
                  title: "",
                  sellPoint: "",
                  cid: "",
                  price: "",
                  num: "",
                  desc: "",
                  image: ""
              }
            }
        })
      }
    },
    cancel() {
      this.$emit("changeOuter", false);
    }
  }
};
</script>

<style>
</style>